import React from 'react';
import {WeaLocaleProvider, WeaInputLocale} from 'ecCom';
import { isEqual, isEmpty } from 'lodash';
const getLabel = WeaLocaleProvider.getLabel;
const getCurrentLabel = WeaInputLocale.getCurrentLabel;
const getMultiStrFromBase64 = WeaInputLocale.getMultiStrFromBase64;
class Item extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidUpdate(){
        const { data } = this.props;

        const {width, left } = this.state;
        let { prefix, title } = data;
        if(!prefix) return;
        const titleWidth = $(`#title_${prefix}`).width();
        const titleLeft = $(`#title_${prefix}`).position() ? $(`#title_${prefix}`).position().left : 0;
        if(left != titleWidth+titleLeft+10 && width != titleWidth+titleLeft+10+120+5){
            this.setState({
                left : titleWidth+titleLeft+10,
                width: titleWidth+titleLeft+10+120+5
            })
        }
    }

    componentDidMount(){
        const { data } = this.props;
        let { prefix } = data;
        if(!prefix) return;
        const titleWidth = $(`#title_${prefix}`).width();
        const titleLeft = $(`#title_${prefix}`).position() ? $(`#title_${prefix}`).position().left : 0;

        this.setState({
            left : titleWidth+titleLeft+10,
            width: titleWidth+titleLeft+10+120+5
        })
    }

    render() {
        const { data } = this.props;
        const { left=0, width=0 } = this.state;
        const {
            prefix, title, langtitle,
            titleState, settingState, refreshIconState, settingIconState, closeIconState, moreLocal,
            iconLogo, iconLock, iconUnLock, iconRefresh, iconSetting, iconClose, style, iconMore, iconEsymbol,
            displayPosition = 'bottom'
        } = data;

        let contentBackgroundColor = null;
        if(style){
            contentBackgroundColor = style.contentBackgroundColor
        }

        if (!prefix) {
            return <div></div>;
        }

        const tr = (
            <tr height="18">
                <td width="8"><img src={iconEsymbol} alt=""/></td>
                <td width="*"><a href="javascript:;"><font className="font" style={{whiteSpace: 'nowrap', width: '306px', overflow: 'hidden', display: 'inline-block',
                    textOverflow: 'ellipsis'}}>{getLabel(387821,"Gmail Labs推出搜索自动完成功能")}</font></a></td>
                <td width="40"><font className="font" style={{whiteSpace: 'nowrap'}}>{getLabel(387822,"曾东平")}</font></td>
            </tr>
        );
        const tr2 = (
            <tr className="sparator" height="1px">
                <td colSpan="3"/>
            </tr>
        );

        return (
            <div className="item" id={`item_${prefix}`}>
                {
                    titleState == 'show' ?
                        <div className="header" id={`header_${prefix}`}>
                                    <span className="icon" id={`icon_${prefix}`}>
                                        <img src={iconLogo} style={{ width: '16px', height: '16px' }} alt="" />
                                    </span>
                            <span className="title" id={`title_${prefix}`}>{getCurrentLabel(getMultiStrFromBase64(title))}</span>
                            {
                                displayPosition == 'right' ? <span className="tab2 tab2-right" style={{ position: 'absolute', left: left, width: `calc( 100% - ${width}px )`}}>
                                <table height="32" cellSpacing="0" cellPadding="0">
                                    <tr>
                                        <td className="tab2selected" style={{whiteSpace: 'nowrap'}}>{getLabel(83663,"聚焦新闻")}</td>
                                        <td className="tab2unselected" style={{whiteSpace: 'nowrap'}}>{getLabel(83669,"行业聚焦")}</td>
                                        <td className="tab2unselected" style={{whiteSpace: 'nowrap'}}>{getLabel(83670,"媒体视点")}</td>
                                    </tr>
                                </table>
                            </span>: ''
                            }
                            {
                                settingState == 'show' ?
                                    <span className="toolbar" id={`toolbar_${prefix}`}>
                                        <ul>
                                            <li><a href="javascript:;"><img src={iconLock} alt=""/></a></li>
                                            <li><a href="javascript:;"><img src={iconUnLock} alt=""/></a></li>
                                            {refreshIconState == 'show' ? <li><a href="javascript:;"><img src={iconRefresh} alt=""/></a></li> : ''}
                                            {settingIconState == 'show' ? <li><a href="javascript:;"><img src={iconSetting} alt=""/></a></li> : ''}
                                            {closeIconState == 'show' ? <li><a href="javascript:;"><img src={iconClose} alt=""/></a></li> : ''}
                                            {moreLocal == 'title' ? <li><a href="javascript:;"><img src={iconMore} alt=""/></a></li> : ''}
                                        </ul>
                                    </span> : ''
                            }
                        </div> : ''
                }
                <div className="content" id={`content_${prefix}`}>
                    <div className="content_view" id={`content_view_id_${prefix}`}>
                        {
                            displayPosition == 'bottom' ? <div className="tab2" style={{backgroundColor:contentBackgroundColor}}>
                                <table height="32" cellSpacing="0" cellPadding="0">
                                    <tr>
                                        <td className="tab2selected" style={{whiteSpace: 'nowrap'}}>{getLabel(83663,"聚焦新闻")}</td>
                                        <td className="tab2unselected" style={{whiteSpace: 'nowrap'}}>{getLabel(83669,"行业聚焦")}</td>
                                        <td className="tab2unselected" style={{whiteSpace: 'nowrap'}}>{getLabel(83670,"媒体视点")}</td>
                                    </tr>
                                </table>
                            </div>: ''
                        }
                        <table width="100%">
                            {tr}{tr2}{tr}{tr2}{tr}{tr2}{tr}{tr2}{tr}
                        </table>
                    </div>
                    <div className="footer" id={`footer_${prefix}`} style={{textAlign: 'right'}}>
                        {moreLocal == 'footer' ? <a href="javascript:;"><img src={iconMore} alt=""/></a> : ''}
                    </div>
                </div>
            </div>
        );
    }
}

export default Item;
